import React, { useEffect, useState } from "react"
import { Col, Row, Card, Table } from 'antd'
import * as Icons from '@ant-design/icons'
import CountUp from 'react-countup';
import "./home.css"
import  { getData } from '../../api'
import MyEcharts from '../../components/Echarts'
const columns = [
    {
        title: '课程',
        dataIndex: 'name',
        width: 50,
    },
    {
        title: '今日购买',
        dataIndex: 'todayBuy',
        width: 50,
    },
    {
        title: '本月购买',
        dataIndex: 'monthBuy',
        width: 50,
    },
    {
        title: '总购买',
        dataIndex: 'totalBuy',
        width: 50,
    }
]
const countData = [
    {
        "name": "今日支付订单",
        "value": 1234,
        "icon": "CheckCircleOutlined",
        "color": "#2ec7c9"
    },
    {
        "name": "今日收藏订单",
        "value": 3421,
        "icon": "ClockCircleOutlined",
        "color": "#ffb980"
    },
    {
        "name": "今日未支付订单",
        "value": 1234,
        "icon": "CloseCircleOutlined",
        "color": "#5ab1ef"
    },
    {
        "name": "本月支付订单",
        "value": 1234,
        "icon": "CheckCircleOutlined",
        "color": "#2ec7c9"
    },
    {
        "name": "本月收藏订单",
        "value": 3421,
        "icon": "ClockCircleOutlined",
        "color": "#ffb980"
    },
    {
        "name": "本月未支付订单",
        "value": 1234,
        "icon": "CloseCircleOutlined",
        "color": "#5ab1ef"
    }
]
// 动态获取icon
const iconToElement = name => React.createElement(Icons[name])
const Home = () => {
    const avatarImg = require('../../assets/images/user.png')
    const  [ echartData, setEchartData ] = useState({})
    useEffect(() =>{
        getData().then(({ data }) => {
            const { tableData,orderData, userData, videoData } = data.data
            setTableData(tableData)
            // 对echarts数组组装
            const order = orderData
            const xData = order.date
            const keyArray = Object.keys(order.data[0])
            const series = []
            keyArray.forEach(key =>{
                series.push({
                    name: key,
                    data: order.data.map(item => item[key]),
                    type: 'line'
                })
            })
            setEchartData({
             order: {
                 xData,
                 series
             },
             user: {
                 xData: userData.map(item => item.date),
                 series: [
                     {
                         name: '新增用户',
                         data: userData.map(item => item.new),
                         type: 'bar'
                     },
                     {
                         name: '活跃用户',
                         data: userData.map(item => item.active),
                         type: 'bar'
                     }
                 ]
             },
                video: {
                   series:[
                       {
                           data: videoData,
                           type: 'pie'
                       }
                   ]
                }
            })
        })
    },[])
    //定义数据
   const [ tableData, setTableData ] =  useState([])
    return (
        <Row className="home" justify="space-around">
          <Col style={{ height:'100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-around' }} span={8}>
                  <Card hoverable>
                      <div className="user">
                          <img src={avatarImg} alt={''} />
                          <div className="userinfo">
                              <p className="name">Admin</p>
                              <p className="access">超级管理员</p>
                          </div>
                      </div>
                      <div className="login-info">
                          <p>上次登录时间：<span>2024-06-20</span></p>
                          <p>上次登录地点：<span>武汉</span></p>
                      </div>
                  </Card>

              <Card hoverable>
                  <Table  scroll={{y: 250}} rowKey={"name"} pagination={false} columns={columns} dataSource={tableData}  />
              </Card>
          </Col>
          <Col style={{ height:'100%' }} span={15}>
              <div className="num" style={{ height: '33%' }}>
                  {
                      countData.map((item,index) =>{
                          return (
                              <Card key={index}>
                                  <div className="icon-box" style={{ backgroundColor: item.color }}>
                                      {
                                          iconToElement(item.icon)
                                      }
                                  </div>
                                  <div className="detail">
                                      <p className="num">￥<CountUp end={ item.value } duration={5} /></p>
                                      <p className="text">{ item.name }</p>
                                  </div>
                              </Card>
                          )
                      })
                  }
              </div>
              { echartData.order && <MyEcharts chartData={echartData.order} style={{ height: '33%',width:'100%' }} />}
              <div className="graph">
                  { echartData.user && <MyEcharts chartData={echartData.user} style={{ height: '100%',width:'50%' }} />}
                  { echartData.video && <MyEcharts isAxisChart={false} chartData={echartData.video} style={{ height: '100%',width:'50%' }} />}
              </div>
          </Col>
        </Row>
    )
}
export default Home
